<template>
	<view class="container">
		<view class="header">
			<text class="title">数据确认与补全</text>
			<text class="subtitle">请检查提取的数据，并补充缺失项</text>
			<view class="progress-info">
				<text class="progress-text">第 {{ currentIndex + 1 }} 条 / 共 {{ formData.length }} 条</text>
			</view>
		</view>

		<swiper 
			class="swiper-container" 
			:current="currentIndex"
			@change="onSwiperChange"
			:indicator-dots="true"
			:indicator-active-color="'#007AFF'"
			:indicator-color="'#ddd'"
		>
			<swiper-item v-for="(item, index) in formData" :key="index" class="swiper-item">
				<view class="card-wrapper">
					<view class="card">
						<view class="card-header">
							<text class="card-title">第 {{ index + 1 }} 条数据</text>
							<view class="navigation-hints">
								<text class="hint-text" v-if="index > 0">← 滑动切换</text>
								<text class="hint-text" v-if="index < formData.length - 1">滑动切换 →</text>
							</view>
						</view>
						<scroll-view scroll-y class="card-body card-scroll">
							<view v-for="(field, fieldIndex) in getFieldsArray()" :key="fieldIndex" class="form-row">
								<text class="label">{{ getFieldName(field) }}</text>
								<input class="input" v-model="item[getFieldName(field)]" :placeholder="getFieldPlaceholder(field)" />
							</view>
						</scroll-view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="footer">
			<view class="footer-actions">
				<button 
					class="nav-btn prev-btn" 
					@click="prevCard" 
					:disabled="currentIndex === 0"
				>
					上一条
				</button>
				<button 
					class="nav-btn next-btn" 
					@click="nextCard" 
					:disabled="currentIndex === formData.length - 1"
				>
					下一条
				</button>
			</view>
			<button class="submit-btn" @click="handleSubmit">全部提交 ({{ formData.length }}条)</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			excel: {
				fields: []
			},
			formData: [], 
			excelId: null,
			currentIndex: 0  // 当前显示的卡片索引
		}
	},
	onLoad() {
		const temp_data = uni.getStorageSync('tempExtractData');
		if (!temp_data) {
			uni.showToast({ title: '没有待处理的数据', icon: 'none' });
			uni.navigateBack();
			return;
		}

		this.excelId = temp_data.excelId;
		const extractedData = temp_data.extractedData;

		const excelList = uni.getStorageSync('excelList') || [];
		const targetExcel = excelList.find(item => item.id === this.excelId);

		if (!targetExcel) {
			uni.showToast({ title: '未找到目标Excel表', icon: 'none' });
			uni.navigateBack();
			return;
		}

		this.excel = targetExcel;

		this.formData = extractedData.map(extractedItem => {
			const newItem = {};
			this.getFieldsArray().forEach(field => {
				const fieldName = this.getFieldName(field);
				const fieldDefaultValue = this.getFieldDefaultValue(field);
				// 如果提取的数据中有该字段值，使用提取的值；否则使用默认值
				newItem[fieldName] = extractedItem[fieldName] !== undefined ? extractedItem[fieldName] : fieldDefaultValue;
			});
			return newItem;
		});
	},
	onUnload() {
		uni.removeStorageSync('tempExtractData');
	},
	methods: {
		// swiper切换事件
		onSwiperChange(e) {
			this.currentIndex = e.detail.current;
		},
		// 上一条
		prevCard() {
			if (this.currentIndex > 0) {
				this.currentIndex--;
			}
		},
		// 下一条
		nextCard() {
			if (this.currentIndex < this.formData.length - 1) {
				this.currentIndex++;
			}
		},
		// 获取字段数组，兼容旧版本数据格式
		getFieldsArray() {
			if (!this.excel.fields || this.excel.fields.length === 0) {
				return [];
			}
			return this.excel.fields;
		},
		// 获取字段名称，兼容旧版本和新版本数据格式
		getFieldName(field) {
			if (typeof field === 'string') {
				// 旧版本格式：字段是字符串
				return field;
			} else if (typeof field === 'object' && field.name) {
				// 新版本格式：字段是对象
				return field.name;
			}
			return '';
		},
		// 获取字段默认值
		getFieldDefaultValue(field) {
			if (typeof field === 'object' && field.defaultValue !== undefined) {
				// 新版本格式：有默认值
				return field.defaultValue;
			}
			// 旧版本格式或没有默认值：返回空字符串
			return '';
		},
		// 获取字段占位符文本
		getFieldPlaceholder(field) {
			const fieldName = this.getFieldName(field);
			const defaultValue = this.getFieldDefaultValue(field);
			if (defaultValue) {
				return `请输入${fieldName}（默认：${defaultValue}）`;
			}
			return `请输入${fieldName}`;
		},
		handleSubmit() {
			const excelList = uni.getStorageSync('excelList') || [];
			const targetIndex = excelList.findIndex(item => item.id === this.excelId);

			if (targetIndex === -1) {
				uni.showToast({ title: '目标Excel表已不存在', icon: 'none' });
				return;
			}
			
			excelList[targetIndex].data.push(...this.formData);
			
			uni.setStorageSync('excelList', excelList);
			
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			});
			
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	}
}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f8f8f8;
}

.header {
	padding: 20px 20px 10px 20px;
	text-align: center;
	background: #fff;
	border-bottom: 1px solid #eee;
}

.title {
	font-size: 20px;
	font-weight: bold;
	color: #333;
}

.subtitle {
	font-size: 14px;
	color: #666;
	margin-top: 5px;
	display: block;
}

.progress-info {
	margin-top: 10px;
}

.progress-text {
	font-size: 16px;
	color: #007AFF;
	font-weight: 500;
}

.swiper-container {
	flex: 1;
}

.swiper-item {
	padding: 20px;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.card {
	background: #fff;
	border-radius: 12px;
	padding: 15px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.card-header {
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-title {
	font-size: 16px;
	font-weight: 500;
	color: #333;
}

.navigation-hints {
	display: flex;
	gap: 10px;
}

.hint-text {
	font-size: 12px;
	color: #999;
}

.card-body {
	flex: 1;
	height: 0;
	overflow: hidden;
}

.card-scroll {
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 5px;
}

.form-row {
	margin-bottom: 12px;
}
.form-row:last-child {
	margin-bottom: 0;
}

.label {
	font-size: 14px;
	color: #333;
	margin-bottom: 8px;
	display: block;
}

.input {
	width: 100%;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 14px;
	box-sizing: border-box;
}

.footer {
	padding: 15px 20px;
	background: #fff;
	border-top: 1px solid #eee;
}

.footer-actions {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
}

.nav-btn {
	flex: 1;
	height: 40px;
	border-radius: 8px;
	font-size: 14px;
	background-color: #f8f9fa;
	color: #333;
	border: 1px solid #ddd;
}

.nav-btn:disabled {
	background-color: #f0f0f0;
	color: #999;
	border-color: #e0e0e0;
}

.prev-btn:not(:disabled) {
	background-color: #e3f2fd;
	color: #1976d2;
	border-color: #1976d2;
}

.next-btn:not(:disabled) {
	background-color: #e8f5e8;
	color: #2e7d32;
	border-color: #2e7d32;
}

.submit-btn {
	background-color: #007AFF;
	color: #fff;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
}
</style> 